<!doctype html>
<!--[if lt IE 7]>
<html xmlns:th="http://www.thymeleaf.org" class="lt-ie9 lt-ie8 lt-ie7" lang="en-US"> <![endif]-->
<!--[if IE 7]>
<html xmlns:th="http://www.thymeleaf.org" class="lt-ie9 lt-ie8" lang="en-US"> <![endif]-->
<!--[if IE 8]>
<html xmlns:th="http://www.thymeleaf.org" class="lt-ie9" lang="en-US"> <![endif]-->
<!--[if gt IE 8]><!-->
<html xmlns:th="http://www.thymeleaf.org" lang="en-US"> <!--<![endif]-->

<span th:substituteby="layout.html :: header-include"></span>

<body>

<span th:substituteby="layout.html :: header"></span>

<div class="page-container">
    <div class="container">
        <div class="row">
            <div class="span8 page-content">
                <article class="type-page hentry clearfix">
                    <h1 class="post-title">
                        <a href="#">Register</a>
                    </h1>
                    <hr/>
                    <p>Please input your info to register. If you have problem, please contact support team</p>
                </article>

                <form id="contact-form" th:action="@{/process-register.html}" th:object="${user}"
                      class="row" method="post">

                    <div class="span2">
                        <label for="email">Your Email</label>
                    </div>
                    <div class="span6">
                        <input type="text" name="email" id="email" class="email required input-xlarge"
                               title="* Please provide a valid email address"/>
                    </div>

                    <div class="span2">
                        <label for="password">Password </label>
                    </div>
                    <div class="span6">
                        <input type="password" name="password" id="password" class="required input-xlarge"
                               title="* Please provide a password"/>
                    </div>

                    <div class="span2">
                        <label for="confirmPassword">Confirm Password </label>
                    </div>
                    <div class="span6">
                        <input type="password" name="confirmPassword" id="confirmPassword" class="required input-xlarge"
                               title="* Please provide a password"/>
                    </div>

                    <div class="span2">
                        <label for="firstName">First Name </label>
                    </div>
                    <div class="span6">
                        <input type="text" name="firstName" id="firstName" class="required input-xlarge"
                               title="* Please provide a first name"/>
                    </div>

                    <div class="span2">
                        <label for="lastName">Last Name </label>
                    </div>
                    <div class="span6">
                        <input type="text" name="lastName" id="lastName" class="required input-xlarge"
                               title="* Please provide a last name"/>
                    </div>

                    <div class="span6 offset2 bm30">
                        <input type="submit" name="submit" value="Register" class="btn btn-inverse"/>
                        <img src="/images/loading.gif" id="contact-loader" alt="Loading..."/>
                    </div>

                    <div class="span6 offset2 error-container"></div>
                    <div class="span8 offset2" id="message-sent"></div>
                </form>
            </div>

            <span th:substituteby="layout.html :: sidebar"></span>
        </div>
    </div>
</div>

<span th:substituteby="layout.html :: footer"></span>

</body>
</html>

